<div class="content-heading">Interaction
    <small>Advanced bootstrap components for user interaction</small>
</div>
<div class="row">
    <div class="col-lg-6">
        <h3 class="page-header mt0">Carousel</h3>
        <div>
            <div>
                <carousel [interval]="myInterval" [noWrap]="false">
                    <slide *ngFor="let slidez of slides; let index=index" [active]="slidez.active">
                        <img [src]="slidez.image" class="img-responsive">
                        <div class="carousel-caption">
                            <h4>Slide {{index}}</h4>
                            <p>{{slidez.text}}</p>
                        </div>
                    </slide>
                </carousel>
            </div>
            <div class="row pv">
                <div class="col-lg-6">
                    <p>Interval, in milliseconds:</p>
                    <input class="form-control" type="number" [(ngModel)]="myInterval" />
                </div>
                <div class="col-lg-6">
                    <p>Add a slide with a random image</p>
                    <button class="btn btn-info" type="button" (click)="addSlide()">Add Slide</button>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-6 typeahead-ctrl">
        <h3 class="page-header mt0">Typeahead</h3>
        <!-- Static arrays -->
        <h4>Static arrays</h4>
        <pre class="card card-block card-header">Model: {{selected | json}}</pre>
        <input [(ngModel)]="selected" [typeahead]="states" (typeaheadOnSelect)="typeaheadOnSelect($event)" class="form-control">
        <!-- Custom item template -->
        <ng-template #customItemTemplate let-model="item" let-index="index">
            <h5>This is: {{model | json}} Index: {{ index }}</h5>
        </ng-template>
        <h4>Custom item template</h4>
        <pre class="card card-block card-header">Model: {{customSelected | json}}</pre>
        <input [(ngModel)]="customSelected" [typeahead]="statesComplex" [typeaheadItemTemplate]="customItemTemplate" [typeaheadOptionField]="'name'" (typeaheadOnSelect)="typeaheadOnSelect($event)" class="form-control">
        <!-- Asynchronous results -->
        <h4>Asynchronous results</h4>
        <pre class="card card-block card-header">Model: {{asyncSelected | json}}</pre>
        <input [(ngModel)]="asyncSelected" [typeahead]="dataSource" (typeaheadLoading)="changeTypeaheadLoading($event)" (typeaheadNoResults)="changeTypeaheadNoResults($event)" (typeaheadOnSelect)="typeaheadOnSelect($event)" [typeaheadOptionsLimit]="7" [typeaheadOptionField]="'name'" placeholder="Locations loaded with timeout" class="form-control">
        <div *ngIf="typeaheadLoading===true">
            <i class="fa fa-refresh ng-hide" style=""></i>
        </div>
        <div *ngIf="typeaheadNoResults===true" class="" style="">
            <i class="fa fa-times"></i> No Results Found
        </div>
        <!--Typeahead inside a form-->
        <h4>Typeahead inside a form</h4>
        <pre class="card card-block card-header">Model: {{myForm.value.state | json}}</pre>
        <form [formGroup]="myForm">
            <input formControlName="state" [typeahead]="states" (typeaheadOnSelect)="typeaheadOnSelect($event)" [typeaheadOptionsLimit]="7" [typeaheadOptionField]="'name'" [typeaheadMinLength]="0" placeholder="Typeahead inside a form" class="form-control">
        </form>
    </div>
</div>
<div class="row">
    <div class="col-lg-6">
        <h3 class="page-header">Calendar</h3>
        <pre class="card card-block card-header">Selected date is: <em *ngIf="dt">{{ getDate() | date:'fullDate'}}</em></pre>
        <h4>Inline</h4>
        <div style="display:inline-block; min-height:290px;">
            <datepicker [(ngModel)]="dt" [minDate]="minDate" [showWeeks]="true"></datepicker>
        </div>
        <hr />
        <button type="button" class="btn btn-sm btn-info" (click)="today()">Today</button>
        <button type="button" class="btn btn-sm btn-default btn-secondary" (click)="d20090824();">2009-08-24</button>
        <button type="button" class="btn btn-sm btn-danger" (click)="clear()">Clear</button>
        <button type="button" class="btn btn-sm btn-default btn-secondary" (click)="toggleMin()" tooltip="After today restriction">Min date</button>
    </div>
    <div class="col-lg-6">
        <h3 class="page-header">Time picker</h3>
        <timepicker [(ngModel)]="mytime" (change)="changed()" [hourStep]="hstep" [minuteStep]="mstep" [showMeridian]="ismeridian" [readonlyInput]="!isEnabled"></timepicker>
        <pre class="alert alert-info">Time is: {{mytime}}</pre>
        <div class="row">
            <div class="col-xs-6">
                Hours step is:
                <select class="form-control" [(ngModel)]="hstep">
                    <option *ngFor="let opt of options.hstep" [value]="opt">{{opt}}</option>
                </select>
            </div>
            <div class="col-xs-6">
                Minutes step is:
                <select class="form-control" [(ngModel)]="mstep">
                    <option *ngFor="let opt of options.mstep" [value]="opt">{{opt}}</option>
                </select>
            </div>
        </div>
        <hr>
        <button type="button" class="btn btn-info" (click)="toggleMode()">12H / 24H</button>
        <button type="button" class="btn btn-info" (click)="isEnabled=!isEnabled">Enable / Disable input</button>
        <button type="button" class="btn btn-primary" (click)="update()">Set to 14:00</button>
        <button type="button" class="btn btn-danger" (click)="clearTP()">Clear</button>
    </div>
</div>
